<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <div class="flex items-center justify-between px-6 py-4 bg-white border-b">
      <div class="flex items-center space-x-4">
        <el-button class="text-gray-600 hover:text-gray-900" @click="goToData">
          <i class="fas fa-arrow-left"></i>
        </el-button>
        <h1 class="text-lg font-medium">{{name}}</h1>
      </div>
      <div class="flex items-center space-x-4">
        <div class="relative">
          <el-input
            v-model="keyword"
            type="text"
            placeholder="请输入关键字搜索"
            class="w-64 pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500 text-sm"
            @input="onKeywordChange"
          />
          <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
        </div>
<!--        <el-button class="p-2 text-gray-600 hover:text-gray-900">-->
<!--          <i class="fas fa-ellipsis-v"></i>-->
<!--        </el-button>-->
<!--        <el-button class="flex items-center px-4 py-2 text-white bg-blue-500 rounded !rounded-button whitespace-nowrap">-->
<!--          <i class="fas fa-plus mr-2"></i>-->
<!--          新建-->
<!--        </el-button>-->
      </div>
    </div>
    <!-- 主内容区 -->
    <div class="px-6 py-4">
      <!-- 筛选区 -->
<!--      <div class="mb-6 flex justify-end">-->
<!--        <div class="relative">-->
<!--          <el-button @click="toggleDropdown"-->
<!--                     class="flex items-center px-4 py-2 text-sm text-gray-700 bg-white border rounded !rounded-button whitespace-nowrap">-->
<!--            <span>选择所有</span>-->
<!--            <i class="fas fa-chevron-down ml-2"></i>-->
<!--          </el-button>-->
<!--          <div class="absolute right-0 mt-2 w-48 bg-white border rounded-lg shadow-lg z-10"-->
<!--               v-show="showDropdown">-->
<!--            <div class="py-1">-->
<!--              <el-button @click="enableSelected"-->
<!--                         class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">-->
<!--                启用选择的-->
<!--              </el-button>-->
<!--              <el-button @click="disableSelected"-->
<!--                         class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">-->
<!--                禁用选择的-->
<!--              </el-button>-->
<!--              <el-button @click="deleteSelected" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100">-->
<!--                删除选择的-->
<!--              </el-button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <!-- 解析块列表 -->
      <div class="space-y-4">
        <div v-for="(item, index) in items" :key="index" class="bg-white rounded-lg p-6 border">
          <div class="flex items-start justify-between">
            <div class="flex items-start space-x-4 flex-1">
<!--              <input type="checkbox" class="mt-1" v-model="item.selected">-->
              <div class="flex-1">
                <p class="text-gray-800 leading-relaxed" v-html="highlightKeyword(item.content)"></p>
              </div>
            </div>
<!--            <div class="ml-4">-->
<!--              <div class="w-12 h-6 flex items-center rounded-full p-1 cursor-pointer transition-colors duration-200"-->
<!--                   :class="{ 'bg-blue-500': item.available, 'bg-gray-300': !item.available }"-->
<!--                   @click="toggleItem(index)">-->
<!--                <div class="bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out"-->
<!--                     :class="{ 'translate-x-6': item.available }">-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination
        v-model="page"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        :page-sizes="[10, 20, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import {getChunks} from "../../api/rag/rag";
import {keyword} from "chalk";
export default {
  data() {
    return {
      datasetId: '',
      showDropdown: false,
      items: [],
      id: '',
      page: 1,
      pageSize: 10,
      total: 1000,
      name: '',
      keyword: ''
    };
  },
  mounted() {
    this.datasetId = this.$route.query.datasetId;
    this.id = this.$route.query.doc_id;
    this.name = this.$route.query.doc_name;

    this.getBlock('');
  },
  methods: {
    // 监听输入框的变化
    onKeywordChange() {
      this.getBlock(this.keyword); // 触发模糊搜索
    },
    keyword,
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getBlock(this.keyword);  // 更新数据
    },
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.getBlock(this.keyword);  // 更新数据
    },
    //获取块列表
    getBlock(keyword) {
      getChunks(this.datasetId, this.page, this.pageSize, this.id, keyword, '').then((res) => {
        this.total = res.data.total;
        this.items = res.data.chunks.map(item => ({
          ...item,
          available: item.available ?? false, // 确保 available 存在
        }));
      });
    },
    goToData() {
      this.$router.back(); // 等同于浏览器后退按钮
    },
    toggleItem(index) {
      this.items[index].available = !this.items[index].available;
    },
    toggleDropdown() {
      this.showDropdown = !this.showDropdown;
    },
    highlightKeyword(content) {
      if (this.keyword.trim() === '') return content;  // 如果没有关键字，直接返回原内容
      const regex = new RegExp(`(${this.keyword})`, 'gi');  // 不区分大小写的正则表达式
      return content.replace(regex, '<span style="color: red;">$1</span>');  // 将关键字包裹在 <span> 标签中并设置颜色为红色
    },


    enableSelected() {
      this.items.forEach(item => {
        if (item.selected) {
          item.enabled = true;
        }
      });
      this.showDropdown = false;
    },
    disableSelected() {
      this.items.forEach(item => {
        if (item.selected) {
          item.enabled = false;
        }
      });
      this.showDropdown = false;
    },
    deleteSelected() {
      this.items = this.items.filter(item => !item.selected);
      this.showDropdown = false;
    }
  }
};
</script>
<style scoped>
.custom-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 0.25rem;
  cursor: pointer;
}

.custom-checkbox.checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>
